<template>
  <div class="box">
    <aside-box>
      <template #zh> 折线图 </template>
      <template #en> line chart </template>
      <div class="line" ref="lineRef"></div>
    </aside-box>
  </div>
</template>

<script lang="ts" setup>
import asideBox from "@/components/asideBox";
import * as echarts from "echarts";
const data = ref("");

// 自定义tooltip
function tooltipBox(params) {
  return `
  <div class="custom-tooltip">
    <div>
    ${params.marker} ${params.seriesName}
    </div>
    ${params.name}: ${params.value}
  </div>
`;
}

const option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: "#dddc6b",
      },
    },
  },
  grid: {
    left: "10",
    top: "20",
    right: "3%",
    bottom: "10",
    containLabel: true,
  },

  xAxis: [
    {
      type: "category",
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12,
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255, .2)",
        },
        symbol: ["none", "arrow"], // 设置箭头图标
      },
    axisTick: {
      show: false,
    },
      data: ["1月", "2月", "3月", "4月", "5月", "6月"],
    },
    {
      axisPointer: { show: false },
      axisLine: { show: false },
      position: "bottom",
    },
  ],

  yAxis: [
    {
      type: "value",
      axisTick: { show: false },
      splitNumber: 4,
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
        symbol: ["none", "arrow"], // 设置箭头图标
      },
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize: 12,
          fontFamily: "阿里妈妈数黑体 Bold",
        },
      },

      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
          type: "dotted",
        },
      },
    },
  ],
  series: [
    {
      name: "结算率",
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          color: "rgba(31, 174, 234, 1)",
          width: 2,
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(31, 174, 234, 0.4)",
              },
              {
                offset: 0.8,
                color: "rgba(31, 174, 234, 0.1)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)",
        },
      },
      itemStyle: {
        normal: {
          color: "#1f7eea",
          borderColor: "#1f7eea",
          borderWidth: 5,
        },
      },
      data: [3, 6, 3, 6, 3, 9],
    },
  ],
};

// 实例化echarts
const [lineRef] = useEcharts(option);
</script>

<style lang="scss" scoped>
.box {
  background: rgb(8, 32, 63);
  .line {
    width: 100%;
    height: 200px;
  }
}

:deep(.custom-tooltip) {
  color: #fff !important;
}
</style>